<template>
  <div :class='s.wrap' @click='onMsg' v-if='hasLoadMsg'>
   <div :class='s.headerWrap'>
     <img :src='msg.USER_HEAD' :class='s.header'>
     <img :src="labaIcon" :class='s.labaIcon'>
   </div>
   <div :class='s.msgWrap' ref='msgWrap'>
    <div :class='s.nameWrap'>用户<span>{{msg.NICKNAME}}</span>刚发表评论：<span :class='s.time'>{{ msg.dataTime}}</span>
     </div>
    <div :class='s.content' v-html='msg.COMMUNITY_CONTENT' :style='{width: contentW}'></div>
   </div>
  </div>
</template>

<script>
import LocalDAO from 'common/localDAO'
import RemoteDAO from 'common/remoteDAO'
import CommonUtil from 'common/common.util'
import EmojiUtil from 'components/game/comment/EmojiUtil'

export default {
  data () {
    return {
      labaIcon: require('assets/images/dalaba@2x.png'),
      hasLoadMsg: false,
      msg: {
        COMMUNITY_CONTENT: '',
        USER_HEAD: '',
        NICKNAME: '',
        COMMUNITY_DATE: '',
        COMMUNITY_TIME: '',
        USER_CODE: '',
        SERIAL_NO: '',
        dataTime: ''
      },
      emojiUtil: null,
      contentW: 0
    }
  },
  watch: {
    hasLoadMsg: function (val) {
      if (val) this.$nextTick(() => {this.contentW = (this.$refs.msgWrap.clientWidth - 30 ) + 'px'})
    }
  },
  mounted () {
    this.fetchComment(this.$route.query.gameId, LocalDAO.getUserCode())
  },
  methods: {
    onMsg () {
      this.$emit('click')
    },
    pushMsg (msg) {
      this.msg = this.filterMsg(msg)
    },
    fetchComment (gameId, userCode) {
      var params = {
        USER_CODE: userCode,
        ID: gameId,
        PAGE_SIZE: '1',
        PAGE_NO: '1',
        QUERY_FLAG: '0' //必须传0，才能查到其他人的
      }
      RemoteDAO.callUC12008318(params, resp => {
        if (resp.error === '0' && resp.data.body.length > 0) {
          this.msg = this.filterMsg(resp.data.body[0])
          this.hasLoadMsg = true
        }
      })
    },
    filterMsg(msg){
      msg.NICKNAME = msg.NICKNAME.length <= 8 ? msg.NICKNAME : msg.NICKNAME.substring(0, 8) + '...';
      if(msg.USER_HEAD == '') msg.USER_HEAD = CommonUtil.getDefaultUserHead(msg.USER_CODE);
      msg.COMMUNITY_DATE = CommonUtil.formatDatePoint(msg.COMMUNITY_DATE);
      msg.COMMUNITY_TIME = CommonUtil.formatHourMinute(msg.COMMUNITY_TIME);
      msg.COMMUNITY_CONTENT = unescape(msg.COMMUNITY_CONTENT.replace(/\\u/g, '\%u'))
      if (this.emojiUtil == null) this.emojiUtil = new EmojiUtil(false)
      msg.COMMUNITY_CONTENT = '“'+ this.emojiUtil.str2Emoji(msg.COMMUNITY_CONTENT) + '”';
      if (msg.COMMUNITY_DATE == CommonUtil.getTodayFormatDate()) {
        msg.dataTime = "今天 " + CommonUtil.formatHourMinute(msg.COMMUNITY_TIME);
      } else {
        let position = msg.COMMUNITY_DATE.indexOf(".");
        if ( position >= 0) { // 只取月、日
          msg.COMMUNITY_DATE = msg.COMMUNITY_DATE.substring(position + 1);
        }
        msg.dataTime = msg.COMMUNITY_DATE + " " + msg.COMMUNITY_TIME;
      }
      return msg;
    }
  }
}
</script>
<style lang='less' module='s'>
.wrap{ 
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  .headerWrap{
    width: 40px;
    position: relative;
    .header{
      width: 100%;
      border-radius: 50%;
    }
    .labaIcon{
      width: 40%;
      position: absolute;
      right: -3px;
      bottom: 0px;
    }
  }
  .msgWrap{
    // align-items: center;
    flex: 1;
    background-color: #f1f3f6;
    margin: 0 10px;
    position: relative;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    font-size: 13px;
    color: #565656;
    padding: 5px 10px;
    // overflow: hidden;
    // text-overflow:ellipsis;
    // white-space: nowrap; 
    &:after{
      content: '';
      width: 10px;
      height: 20px;
      border-bottom: solid 15px #f1f3f6;
      border-left: solid 10px transparent;
      display: block;
      position: absolute;
      left: -8px;
      bottom: 0;
    }
    .content{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap; 
      // width: 100%;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      img{
        height: 25px;
        vertical-align: bottom;
      }
    }
    .nameWrap{
      font-size: 10px;
      color: #999;
      position: relative;
      span{
        color: #23a3df;
      }
      .time{
        position: absolute;
        right: 10px;
        color: #999;
      }
    }
  }
}
</style>